<template>
    <div class="wrap">
        <div class="show">

            <div class="head">
                  <div class="iconfont close" @click="tohome" style="margin-left: -22px;">&#xe6b1;</div>
                <div class="title">发布</div>
            </div>

            <div class="block"></div>
            <div class="inputcontainer">
                <div class="inputdetail">
                    <input type="text" v-model="tour.tour_title" name="tour_title" placeholder="标题 有助于其他趣粉搜索的你哦">
                </div>
                <div class="inputdetail">
                    <input type="text" v-model="tour.tour_content"  name="tour_content" placeholder="描述一下你的推荐">
                </div>
            </div>

            <div class="image-list">
                <div class="list-img" v-show="hasPhoto">
                  <img @click="showUpload()" class="tour_picture" src="../../../assets/images/fabu.png" />
                    <span class="choosephoto">请选择或者拍照上传照片</span>
                  <input @change="doUpload($event)" id="image" accept="image/jpeg,image/jpg,image/png" type="file" name="tour_picture" style="display: none">
                </div>
            </div>
           <br/>
            <div class="inputcontainer">
                <div class="inputdetail">
                  <p style="font-size: 20px;color: #888;">请选择推荐类别：</p>
                  <br/>
                  <input type="radio" name="type" value="0"checked><span style="font-size: 15px;color: #888;">美食</span>
                  <input type="radio" name="type" value="1"><span style="font-size: 15px;color: #888;">景点</span>
                  <input type="radio" name="type" value="2"><span style="font-size: 15px;color: #888;">穿搭</span>
                </div>
            </div>
            <br/>
            <div class="footer">
                <button class="fabu" @click="publish">确定发布</button>
            </div>
        </div>
    </div>
</template>
<script>
    import axios from 'axios'
    import {Toast,MessageBox} from 'mint-ui'
    import util from '../../../assets/js/util.js'
    export default {
        data () {
            return {
                imgUrls: [],
                hasPhoto: true,
                image:'',
                user_id:0,
                tour: {
                    tour_id: '',
                    tour_time: new Date(),
                    tour_title: '',
                    tour_picture: '',
                    tour_content: '',
                    tour_userid: ''
                }
            }
        },
        delimiters: ['{[', ']}'],
        watch: {
            imgUrls: 'showAddpic'
        },
        mounted() {
            axios.get('/api/user/index1.html')
                .then((res) => {
                    console.log(res);
                    this.user_id = res.data.data.user_id;
                })
                .catch((err) => {
                    console.log(err);
                });
            this.timer = setInterval(()=>{
                this.tour_time = new Date()
            },1000)
        },
        beforeDestroy(){
            if(this.timer){
                clearInterval(this.timer);
            }
        },
        methods: {
            tohome () {
                this.$router.push({path: '/home'})
            },
            showAddpic () {
                let vm = this;
                if(vm.imgUrls.length >= 1) {
                    vm.hasPhoto = false;
                } else {
                    vm.hasPhoto = true;
                }
            },
            showUpload () {
                document.getElementById('image').click();
            },
            doUpload (event) {
                // console.log(event.target.value)
                //console.log(event.target.files[0].name)
                //预览图片
                let file = event.target.files[0]
                const fileReader = new FileReader()
                fileReader.readAsDataURL(file) //读取图片
                fileReader.addEventListener('load', function() {
                    // 读取完成
                    let res = fileReader.result
                    document.getElementsByClassName('tour_picture')[0].src = res
                    // res是base64格式的图片
                })


                let formData = new FormData()
                formData.append('file', event.target.files[0], event.target.files[0].name)

                let config = {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }
                let that = this
                axios.post('/api/tour/upload_pri.html', formData, config)
                    .then(res => {
                        console.log(res)
                        that.tour.tour_picture = res.data.data.path;
                    })
                    .catch(err => {
                        console.log(err)
                    })
            },
            publish () {

                if(this.tour.tour_title == ''){
                    Toast('请输入发布的标题')
                    return;
                }
                if(this.tour.tour_content == ''){
                    Toast('描述一下推荐吧')
                    return;
                }
                // if(this.imgUrls == ''){
                //     MessageBox.alert('上传几张推荐图片吧~~如果无法上传，请确定是否开启拍照权限，如果仍无效果，请移步其他浏览器')
                //     return;
                // }
                    MessageBox.alert('发布成功！！！').then(
                        (action) => {
                            axios.post('/api/tour/doadd.html', this.tour,this.tour.tour_userid=this.user_id)
                                .then((res) => {
                                    // this.user.push(res.data);
                                    // this.tour_title = '';
                                    // this.tour_content = '';
                                    // this.tour_picture='';
                                    // this.tour_time='';
                                    console.log(res)
                                    this.$router.push('/personal')
                                })
                        }
                    )
                        .catch((err) => {
                            console.log(err);
                        });
            },
        }
    }
</script>
<style lang="css" scoped>
    *{
        margin: 0;
        padding: 0;
        touch-action: pan-y;
    }
    .head {
        display: -webkit-flex;
        display: flex;
        align-items: center;
        height: 1rem;
        padding-left: .4rem;
        box-sizing: border-box;
        position: fixed;
        color: lightyellow;
        background-color: #00bcd4;;
        top: 0;
        left: 0;
        right: 0;
    }
    .addr {
        width: 100%;
        height: 15px;
    }
    .border  .topname{
        display: -webkit-flex;
        display: flex;
        height: 1rem;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    .topname .item{
        width: 33.3333%;
        text-align: center;
        color: #000;
    }
    .topname .item.selected{
        border-radius: 1.8rem;
        height: 1rem;
        line-height: 1rem;
        background-color: #ffda44;
    }
    .footer {
        width: 100%;
        position: fixed;
        bottom: 0;
        height: 1.2rem;
        display: -webkit-flex;
        display: flex;
        align-items: center;
        background-color: #fff;
    }
    .fabu{
        outline: none;
        border: none;
        width: 98%;
        height: 1rem;
        background-color: red;
        color: #fff;
        display: block;
        margin: 0 auto;
    }
    .inputcontainer {
        width: 100%;
    }
    .inputdetail {
        width: 100%;
        border-bottom: 1px solid #f8f8f8;
    }
    .inputdetail input {
        border: none;
        outline: none;
        height: 1rem;
        padding-left: 10px;
        box-sizing: border-box;
        font-size: 15px;
    }
    .inputbox input::-webkit-input-placeholder {
        color: #999999;
    }
    .image-list{
        width: 100%;
        height: 3rem;
        background-color: #f8f8f8;
    }
    .list-img {
        display: -webkit-flex;
        display: flex;
        height: 3rem;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .list-img img {
        width: 70px;
        height: 70px;
        display: block;
        margin-bottom: 15px;
    }
    .choosephoto {
        font-size: 20px;
        color: #888;
    }
    .list-ul {
        width: 100%;
        /*height: 200px;*/
        height: auto;
        padding: 1rem 1rem;
        background-color: #f8f8f8;
        box-sizing: border-box;
    }
    .list-ul li {
        width: 25%;
        display: inline-block;
        position: relative;
    }
    .list-link {
        width: 100%;
    }
    .list-link img {
        width: 1rem;
        height: 1rem;
        margin-left: -30px;
        margin-top: -135px;
    }
    .cancleimg {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        display: block;
        background: url('../../../assets/images/X.png') no-repeat;
        background-size: cover;
        position: absolute;
        top: -85px;
        left: -50px;
    }
    .list-li-add {
        height: 1rem;
    }
    .list-li-add .add-img{
        width: 1rem;
        height: 1rem;
        margin-left: -35px;
        margin-top: -47px;
        display: block;
        border: 1px solid #333;
        background: url('../../../assets/images/fabu.png') no-repeat;
        background-size: 1rem 1rem;
        background-position: center center;
    }
    .wrap {
        width: 100%;
        height: 100%;
    }

    .block {
        height: 50px;
    }
    .close img{
        width: 20px;
        height: 20px;
    }
    .title {
        -webkit-box-flex: 1;
        flex: 1;
        text-align: center;
        font-size: 25px;
        font-weight: 700;
        color: lightyellow;
        margin-left: -23px;
    }
    .selfinput .grids:before{
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        top: 0;
        right: 0;
        height: 1px;
        border-top: 1px solid #D9D9D9;
        transform: scaleY(0.5);
        transform-origin:0 0;
    }
    .grid:before{
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        width: 1px;
        bottom: 0;
        border-right: 1px solid #d9d9d9;
        transform: scaleX(.5);
        transform-origin:100% 0;
    }
    .grid:after{
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        height: 1px;
        bottom: 0;
        border-bottom: 1px solid #d9d9d9;
        transform: scaleY(.5);
        transform-origin:0 100%;
    }
    .selfinput .operate:before{
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        top: 0;
        right: 0;
        height: 1px;
        border-top: 1px solid #D9D9D9;
        transform: scaleY(0.5);
        transform-origin:0 0;
    }
    .line1 .inputbox{
        flex:1;
    }
    .line1:after{
        content: '';
        background: #d9d9d9;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 1px;
        transform-origin: 0 100%;
        transform: scaleY(.5);
    }
    .inputbox1:after{
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        width: 1px;
        bottom: 0;
        border-right: 1px solid #d9d9d9;
        transform: scaleX(.5);
        transform-origin:100% 0;

    }
    .inputbox .text{
        width: 10rem;
        height: 4.5rem;
        /*text-align: center;*/
        padding-left: 2rem;
        box-sizing: border-box;
        color:black;
        line-height: 4.5rem;
        position: relative;
        background: url('../../../assets/images/X.png') no-repeat;
        background-size: 1.5rem 1.5rem;
        background-position: 0 1.3rem;

    }
    .inputbox .text.active::before{
        content: attr(data-content);
    }
    .inputbox .text.active::after{
        content: '';
        border-right: 2px solid #d9d9d9;
        height: 50%;
        opacity: 1;
        animation: focus .6s forwards infinite;
    }
    @keyframes focus{
        from{
            opacity: 1;
        }to{
             opacity: 0;
         }
    }
    .back img{
        width: 3rem;
        height: 3rem;
    }
    .title {
        flex: 1;
        text-align: center;
        font-size: 25px;
        font-weight: 700;
    }
    .container .item{
        width: 100%;

        padding-left: 1rem;
        box-sizing: border-box;
        border-bottom: 1px solid #f1f1f1;
        height: 4.5rem;
        line-height: 4.5rem;
        font-size: 1.4rem;
        color: #333
    }
</style>
